<script lang="ts" setup>
import { pinyin } from 'pinyin-pro'
import { areaListUrl, dictList, getExpertList, getOrgList, getSrvsysList } from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'

const list = ref<any[]>([])
const keshiList = ref<any[]>([])
const doctorLevelList = ref<any[]>([])
const jgLevelList = ref<any[]>([])
const jgNameList = ref<any[]>([])
const areaList = ref<any[]>([])
const srvsysList = ref<any[]>([])
const jgList = ref<any[]>([])
const TJlist = ref<any[]>([])
const title = ref('专家库')
const routePath = [{ name: '首页', path: '/' }, { name: title }]
const inputVal = ref('')
const filterModel = ref<any[]>([])
const total = ref(0)
const currentCate = ref('')
const filterList = [
  //   {
  //   label: '专家类别',
  //   value: '',
  //   key: 'category',
  //   options: [
  //     {
  //       label: '科普专家',
  //       value: '科普专家',
  //     },
  //     {
  //       label: '中医',
  //       value: '中医',
  //     },
  //     {
  //       label: '疾控',
  //       value: '疾控',
  //     },
  //     {
  //       label: '食品安全',
  //       value: '食品安全',
  //     },
  //   ],
  // },
  {
    // label: '属地',
    label: '专业领域',
    value: '',
    key: 'srvsys',
    // options: [
    //   {
    //     label: '省级',
    //     value: '省级',
    //   },
    //   {
    //     label: '市级',
    //     value: '市级',
    //   },
    //   {
    //     label: '区域级',
    //     value: '区域级',
    //   },
    // ],
    options: srvsysList.value,
  },
  {
    label: '属地',
    value: '',
    key: 'dependency',
    options: [
      {
        label: '省级',
        value: '省级',
      },
      {
        label: '市级',
        value: '市级',
      },
      {
        label: '区域级',
        value: '区域级',
      },
    ],
  },
  {
    label: '区域',
    value: '',
    key: 'area_name',
    options: areaList.value,

  },
  {
    label: '机构属性',
    value: '',
    key: 'organ_classify',
    options: jgList.value,
  },
  {
    label: '医院等级',
    value: '',
    key: 'grade',
    options: jgLevelList.value,

  },
  {
    label: '科室筛选',
    value: '',
    key: 'work_dept',
    // key: 'department_name',
    options: keshiList.value,

  },
  {
    label: '医生职称',
    value: '',
    key: 'position',
    options: doctorLevelList.value,

  },
  {
    label: '机构名称',
    value: '',
    key: 'organ_name',
    options: jgNameList.value,
  },
]
const queryParamsDict1 = reactive(
  {
    page: {
      rownumber: 3000,
      pageNo: 1,
    },
    condition: [
      {
        colName: 'dict_type',
        ruleType: 'eq',
        value: 'jigou-01',
      },
    ],
    positions: '首页',
  },
)
const queryParamsDict3 = reactive(
  {
    page: {
      rownumber: 3000,
      pageNo: 1,
    },
    condition: [
      {
        colName: 'dict_type',
        ruleType: 'eq',
        value: 'jigou-03',
      },
    ],
    positions: '首页',
  },
)
const queryParamsDict2 = reactive(
  {
    page: {
      rownumber: 3000,
      pageNo: 1,
    },
    condition: [
      {
        colName: 'dict_type',
        ruleType: 'eq',
        value: 'keshi',
      },
    ],
    positions: '首页',
  },
)
const queryParamsDictN = reactive(
  {
    page: {
      rownumber: 3000,
      pageNo: 1,
    },
    condition: [
      {
        colName: 'dict_type',
        ruleType: 'eq',
        value: 'zhuanyelingyu',
      },
    ],
    positions: '首页',
  },
)
const queryParamsDict4 = reactive(
  {
    page: {
      rownumber: 3000,
      pageNo: 1,
    },
    condition: [
      {
        colName: 'dict_type',
        ruleType: 'eq',
        value: 'zhicheng',
      },
    ],
    positions: '首页',
  },
)
const queryParams = reactive(
  {
    page: {
      rownumber: 12,
      pageNo: 1,
    },
    condition: [],
    positions: '首页',
  },
)
// 分页参数更改
function onPageChange(params: { pageNum: number, pageSize: 12 }) {
  queryParams.page.pageNo = params.pageNum
  queryParams.page.rownumber = 12
  getData()
}
function clickItem(item: any) {
  console.log(item.Id)
  navigateTo({
    path: `/peopleHealth/ExpertListDetail`,
    query: {
      id: item.id,
    },
  })
  // getExpertList({
  // 	condition: [{ colName: 'uid', ruleType: 'eq', value: item.uid }],
  // }).then((res) => {
  // debugger

  // 	navigateTo({
  // 		path: `/peopleHealth/ExpertListDetail`,
  //     query: {
  // 		id: res.data[0].uid,
  // 	},
  // 		// query: {
  // 		// 	data: encode(res.data[0]),
  // 		// },
  // 	})
  // })
}
function getData() {
  const { cloned } = useCloned(queryParams)
  if (inputVal.value) {
    cloned.value.relation_condition = {
      relation: 'OR',
      data: [
        {
          colName: 'name',
          ruleType: 'like',
          value: inputVal.value,
        },
        {
          colName: 'category',
          ruleType: 'like',
          value: inputVal.value,
        },
        {
          colName: 'dependency',
          ruleType: 'like',
          value: inputVal.value,
        },
        {
          colName: 'work_dept',
          // colName: 'department_name',
          ruleType: 'like',
          value: inputVal.value,
        },
        {
          colName: 'grade',
          ruleType: 'like',
          value: inputVal.value,
        },
        {
          colName: 'organ_classify',
          ruleType: 'like',
          value: inputVal.value,
        },
        {
          colName: 'organ_name',
          ruleType: 'like',
          value: inputVal.value,
        },
        {
          colName: 'position',
          ruleType: 'like',
          value: inputVal.value,
        },
        {
          colName: 'area_name',
          ruleType: 'like',
          value: inputVal.value,
        },
      ],
    }
  }
  getExpertList(cloned.value).then((res) => {
    total.value = res.page.total
    list.value = res.data
  }).catch(() => {
  })
}
function getTJData() {
  getExpertList(queryParams).then((res) => {
    total.value = res.page.total
    TJlist.value = res.data.slice(0, 3)
  }).catch(() => {
  })
}
function getDict() {
  dictList(queryParamsDictN).then((res) => {
    res.data.forEach((item) => {
      srvsysList.value.push({
        label: item.value,
        value: item.value,
      })
    })
  })
  dictList(queryParamsDict2).then((res) => {
    res.data.forEach((item) => {
      keshiList.value.push({
        label: item.value,
        value: item.value,
      })
    })
  })
  dictList(queryParamsDict1).then((res) => {
    res.data.forEach((item) => {
      jgList.value.push({
        label: item.value,
        value: item.value,
      })
    })
  })
  dictList(queryParamsDict3).then((res) => {
    res.data.forEach((item) => {
      jgLevelList.value.push({
        label: item.value,
        value: item.value,
      })
    })
  })
  dictList(queryParamsDict4).then((res) => {
    res.data.forEach((item) => {
      doctorLevelList.value.push({
        label: item.value,
        value: item.value,
      })
    })
  })
}

function sortByPinyinFirstLetter(arr) {
  return arr.sort((a, b) => {
    // 获取两个字符串的第一个汉字的拼音，并取第一个字母
    const firstPinyinA = pinyin(a.organ_name.charAt(0), { toneType: 'none' })[0]
    const firstPinyinB = pinyin(b.organ_name.charAt(0), { toneType: 'none' })[0]
    console.log(firstPinyinA, firstPinyinB)
    // 比较两个拼音的首字母进行排序
    if (firstPinyinA < firstPinyinB)
      return -1
    if (firstPinyinA > firstPinyinB)
      return 1
    return 0
  })
}

function getArea() {
  const req = {
    condition: [
      {
        colName: 'area_name',
        ruleType: '[like',
        value: '市',
      },
    ],
  }
  areaListUrl(req).then((res) => {
    console.log(res.data, 1111)
    res.data.forEach((item) => {
      areaList.value.push({
        label: item.area_name,
        value: item.area_name,
      })
    })
  })
  getOrgList({ page: { pageNo: 1, rownumber: 100 } }).then((res) => {
    const list = sortByPinyinFirstLetter(res.data)
    // const list = res.data

    list.forEach((item) => {
      jgNameList.value.push({
        label: item.organ_name,
        value: item.organ_name,
      })
    })
  })
}
onMounted(() => {
  getDict()
  getArea()
  getData()
  getTJData()
})
function onFilter(model: any) {
  // queryParams.condition = []
  // if (model.dependency && model.dependency != '') {
  //     queryParams.condition.push({
  //         "colName": "dependency",
  //         "value": model.dependency,
  //         "ruleType": "eq"
  //     })
  // }
  // if (model.department_name && model.department_name != '') {
  //     queryParams.condition.push({
  //         "colName": "department_name",
  //         "value": model.department_name,
  //         "ruleType": "eq"
  //     })
  // }
  // if (model.grade && model.grade != '') {
  //     queryParams.condition.push({
  //         "colName": "grade",
  //         "value": model.grade,
  //         "ruleType": "eq"
  //     })
  // }
  // if (model.organ_classify && model.organ_classify != '') {
  //     queryParams.condition.push({
  //         "colName": "organ_classify",
  //         "value": model.organ_classify,
  //         "ruleType": "eq"
  //     })
  // }
  // if (model.organ_name && model.organ_name != '') {
  //     queryParams.condition.push({
  //         "colName": "organ_name",
  //         "value": model.organ_name,
  //         "ruleType": "eq"
  //     })
  // }
  // if (model.position && model.position != '') {
  //     queryParams.condition.push({
  //         "colName": "position",
  //         "value": model.position,
  //         "ruleType": "eq"
  //     })
  // }
  // if (model.area_name && model.area_name != '') {
  //     queryParams.condition.push({
  //         "colName": "area_name",
  //         "value": model.area_name,
  //         "ruleType": "eq"
  //     })
  // }
  // if (inputVal.value && inputVal.value != '') {
  //     queryParams.condition.push({
  //         "colName": "name",
  //         "value": inputVal.value,
  //         "ruleType": "eq"
  //     })
  // }

  filterModel.value = model
  console.log(filterModel.value)
  // getData()
  onSearch()
}

function clearInput() {
  inputVal.value = ''
}
// 搜索
function onSearch() {
  queryParams.condition = []
  if (filterModel.value.category && filterModel.value.category != '') {
    queryParams.condition.push({
      colName: 'category',
      value: filterModel.value.category,
      ruleType: 'like',
    })
  }
  if (filterModel.value.srvsys && filterModel.value.srvsys != '') { // 属地
    queryParams.condition.push({
      colName: 'appointment_time',
      value: filterModel.value.srvsys,
      ruleType: 'eq',
    })
  }
  if (filterModel.value.dependency && filterModel.value.dependency != '') { // 属地
    queryParams.condition.push({
      colName: 'dependency',
      value: filterModel.value.dependency,
      ruleType: 'eq',
    })
  }
  // if (filterModel.value.department_name && filterModel.value.department_name != '') {
  // 	queryParams.condition.push({
  // 		colName: 'department_name',
  // 		value: filterModel.value.department_name,
  // 		ruleType: 'eq',
  // 	})
  // }
  if (filterModel.value.work_dept && filterModel.value.work_dept != '') {
    queryParams.condition.push({
      colName: 'work_dept',
      value: filterModel.value.work_dept,
      ruleType: 'eq',
    })
  }
  if (filterModel.value.grade && filterModel.value.grade != '') {
    queryParams.condition.push({
      colName: 'grade',
      value: filterModel.value.grade,
      ruleType: 'eq',
    })
  }
  if (filterModel.value.organ_classify && filterModel.value.organ_classify != '') {
    queryParams.condition.push({
      colName: 'organ_classify',
      value: filterModel.value.organ_classify,
      ruleType: 'eq',
    })
  }
  if (filterModel.value.organ_name && filterModel.value.organ_name != '') {
    queryParams.condition.push({
      colName: 'organ_name',
      value: filterModel.value.organ_name,
      ruleType: 'eq',
    })
  }
  if (filterModel.value.position && filterModel.value.position != '') {
    queryParams.condition.push({
      colName: 'position',
      value: filterModel.value.position,
      ruleType: 'eq',
    })
  }
  if (filterModel.value.area_name && filterModel.value.area_name != '') {
    queryParams.condition.push({
      colName: 'area_name',
      value: filterModel.value.area_name,
      ruleType: 'like',
    })
  }
  // if (inputVal.value && inputVal.value != '') {
  //   queryParams.condition.push({
  //     colName: 'name',
  //     value: inputVal.value,
  //     ruleType: 'eq',
  //   })
  // }
  //    inputVal.value
  getData()
}
</script>

<template>
  <div>
    <div class="mx-auto w-900px pt-34px text-18px text-white">
      <span>主办单位：陕西省卫生健康委员会
      </span>
      <span class="ml-50px">承办单位：陕西省健康教育中心</span>
    </div>
    <div class="">
      <div class="mb-120px">
        <div class="relative mx-auto my-18px w-900px flex items-center">
          <div class="right h-70px flex flex-1 items-center bg-#fff py-5px">
            <input
              v-model="inputVal"
              placeholder="请输入搜索信息"
              class="min-w-0 flex-1 indent-16px outline-none"
            >
            <i
              class="i-ri:close-circle-line cursor-pointer text-gray opacity-0"
              :class="{ 'opacity-100': inputVal }"
              @click="clearInput"
            />
          </div>
          <div
            class="mr-10px h-70px w-120px flex cursor-pointer items-center justify-center text-20px text-#FFF"
            style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
            @click="onSearch"
          >
            搜索
          </div>
        </div>
      </div>
    </div>
    <div class="px-150px">
      <div class="bg-#fff">
        <CommonPageContainer
          :title="title"
          :path="routePath"
        >
          <div class="mt-20px flex justify-between">
            <div class="flex-1">
              <PublicFilter
                class="bg-#FFF"
                :filter-list="filterList"
                :multi-select="true"
                show-type="page"
                @change="onFilter"
              />
              <div class="grid grid-cols-6 gap-3">
                <div
                  v-for="item in list"
                  :key="item.name"
                  class="relative min-w-150px cursor-pointer p-2"
                  border="1px solid #eee"
                  hover="text-#0E9472"
                  @mouseleave="currentCate = ''"
                  @mousemove="currentCate = item.name"
                  @click="clickItem(item)"
                >
                  <!-- <div class="w-45px rounded-tl-10px rounded-br-10px absolute top-2 left-2 text-center"
                                        style="background: linear-gradient(-44deg, rgba(251,165,28,1) -1.24%,rgba(251,165,165,1) 98.64%);color:#fff;font-size: 14px;">
                                        {{ item.grade }}
                                    </div> -->
                  <div class="w-100% flex justify-center">
                    <img
                      class="h-88px w-88px overflow-hidden rounded-50%"
                      style="object-fit: fill;"
                      :src="getImgUrl(item.personal_img)"
                      alt=""
                      :class="{ active: currentCate === item.name }"
                    >
                  </div>
                  <div class="flex justify-center py-10px">
                    <span
                      class="pr-2 font-bold"
                      text="14px"
                    >{{ item.name }}</span>
                    <span
                      style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);border-radius: 3px;"
                      text="#fff 14px"
                    >{{ item.position }}</span>
                  </div>
                  <!-- <div class="truncate text-center" text="#AEAEB2 14px" :title="`推荐单位:${item.organ_name}`">
                    {{ item.organ_name }}
                  </div> -->
                  <div
                    v-if="item.work_unit"
                    class="truncate text-center"
                    text="#666 14px"
                    :title="`工作单位:${item.work_unit}`"
                  >
                    {{ item.work_unit }}
                  </div>
                </div>
              </div>
              <PublicPagination
                :page-size="12"
                :total="total"
                @change="onPageChange"
              />
            </div>
            <!-- <div class="ml-20px w-150px">
              <div>
                <div
                  class="h-40px flex items-center rounded-tl rounded-tr px-10px py-5px"
                  style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                >
                  <img src="/img/tj.png" alt="">
                  <div class="pl-15px" text="#fff 16px">
                    推荐
                  </div>
                </div>
                <div class="w-100% rounded-bl rounded-br" border="2px solid #50bc8d">
                  <div
                    v-for="(item, index) in TJlist" :key="index"
                    class="w-100% flex flex-col cursor-pointer justify-between p-2" @click="clickItem(item)"
                  >
                    <img class="mx-auto inline-block" :src="getImgUrl(item.personal_img)" alt="">
                    <div class="">
                      <div class="mt-10px flex justify-between" hover="text-#0E9472">
                        <div class="font-bold" text="12px">
                          {{ item.name }}
                        </div>
                        <div
                          class="p-1px"
                          style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);border-radius: 3px;"
                          text="#fff 12px"
                        >
                          {{ item.position || '' }}
                        </div>
                      </div>
                      <div v-if="item.work_unit" class="truncate" text="14px" :title="`工作单位:${item.work_unit}`">
                        {{ item.work_unit }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div> -->
          </div>
        </CommonPageContainer>
      </div>
    </div>
  </div>
</template>

<style scoped>
.active {
  border: 4px solid #0e9472;
}
</style>
